<template>
	<view class="main">
		<h2>购物车</h2>
		<u-empty v-if="list.length == 0 && isShow" mode="car" icon="http://cdn.uviewui.com/uview/empty/car.png"></u-empty>
		<ul class="list">
			<li v-for="(item, index) in list" :key="index">
				<view class="sele" @tap="seleFun(item, index)">
					<label>
						<checkbox
							:value="String(item.id)"
							:checked="item.checked"
							borderColor="#727272"
							activeBackgroundColor="#0A84FF"
							activeBorderColor="#0A84FF"
							iconColor="#fff" />
					</label>
				</view>
				<image class="img" :src="item.lists.image" mode=""></image>
				<view class="txt">
					<view class="tit">{{ item.lists.name }}</view>
					<view class="sku">
						<span v-for="(sitem, index) in item.attrs">{{ sitem }}</span>
					</view>
					<view class="price">￥{{ item.price * item.number }}</view>
				</view>
				<!-- <u-number-box class="numBox" v-model="item.number">
					<view slot="minus" class="minus">
						<image src="@/static/img/minus.png" mode=""></image>
					</view>
					<text slot="input" style="width: 50px; text-align: center" class="input">{{ item.number }}</text>
					<view slot="plus" class="plus">
						<image src="@/static/img/plus.png" mode=""></image>
					</view>
				</u-number-box> -->
				<view class="numBox" @tap="cartdelete(item.id)">
					<span class="del">删除</span>
				</view>
			</li>
		</ul>
		<view class="bottom">
			<view class="box">
				<view @tap="selectAll">
					<label class="seleAll">
						<checkbox :checked="allChecked" value="1" borderColor="#727272" activeBackgroundColor="#0A84FF" activeBorderColor="#0A84FF" iconColor="#fff" />
						<view class="msg">全选</view>
					</label>
				</view>
				<view class="allprice">
					<view class="msg">合计：</view>
					<view class="price">￥{{ allPrice }}</view>
				</view>
				<view class="btn" @tap="goPay">去结算</view>
			</view>
		</view>
		<userTabbar seleTabbar="2"></userTabbar>
	</view>
</template>

<script>
import userTabbar from '../../components/userTabbar.vue';
import { cartList, cartDel,preOrder } from '@/api/user.js';
export default {
	components: {
		userTabbar
	},
	data() {
		return {
			isShow:false,
			value: 1,
			list: [],
			allChecked: false,
			allPrice: '0.00',
			checkboxValue: []
		};
	},
	onLoad() {
		this.getList();
	},
	methods: {
		async goPay(){
			let data = []
			this.checkboxValue.forEach(item => {
				data.push({
					"sku_id":item.sku_id,
					"number":item.number
				})
			})
			data = data.map(obj => {  
			    return `sku_id:${obj.sku_id},number:${obj.number}`;  
			}).join('|');
			let res = await preOrder({
				data
			})
			uni.navigateTo({
				url:`/pages/pageB/order/payOrder?tag=${res.data}`
			})
		},
		async cartdelete(id) {
			let res = await cartDel({
				ids: id
			});
			if (res.code == 1) {
				uni.showToast({
					title: '删除成功',
					icon: 'none'
				});
				this.getList();
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				});
			}
		},
		seleFun(item, index) {
			this.allPrice = 0;
			this.list[index].checked = !this.list[index].checked;
			if (!this.list[index].checked) {
				this.checkboxValue = this.checkboxValue.filter((sitem) => {
					return sitem.id != this.list[index].id;
				});
				this.allChecked = false;
			} else {
				this.checkboxValue.push(item);
				let all = this.list.every((item) => {
					return item.checked === true;
				});
				if (all) {
					this.allChecked = true;
				} else {
					this.allChecked = false;
				}
			}
			this.checkboxValue.forEach((item) => {
				this.allPrice = item.price * item.number + this.allPrice;
			});
		},
		//全选，全不选
		selectAll() {
			this.allPrice = 0;
			this.allChecked = !this.allChecked;
			if (this.allChecked) {
				this.list.map((item) => {
					item.checked = true;
				});
				this.checkboxValue = this.list;
			} else {
				this.list.map((item) => {
					item.checked = false;
				});
				this.checkboxValue = [];
			}
			this.checkboxValue.forEach((item) => {
				this.allPrice = item.price * item.number + this.allPrice;
			});
		},
		async getList() {
			this.isShow = false
			let res = await cartList({
				page_size: 10
			});
			this.list = res.data.data;
			this.list.forEach((item) => {
				item.checked = false;
			});
			this.isShow = true
		}
	}
};
</script>

<style lang="scss" scoped>
.main {
	min-height: calc(100vh - 50px);
	background-image: url('@/static/img/cartBg.png');
	background-repeat: no-repeat;
	background-position: top;
	background-size: 100% 135px;
	padding: 66px 15px 0;

	h2 {
		font-size: 22px;
		color: #232323;
		margin-bottom: 22px;
	}

	.list {
		width: 100%;
		padding-bottom: 150px;

		li {
			width: 100%;
			display: flex;
			align-items: center;
			position: relative;
			margin-bottom: 25px;

			/deep/.uni-checkbox-input {
				border-radius: 100px;
				margin: 0;
			}

			.img {
				width: 90px;
				height: 75px;
				margin: 0 8px;
				border-radius: 8px;
			}

			.txt {
				height: 75px;
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.tit {
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-line-clamp: 2;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					font-size: 13px;
					color: #232323;
					font-weight: 700;
				}

				.sku {
					font-size: 12px;
					color: #666666;
				}

				.price {
					font-size: 14px;
					color: #e1222a;
					font-weight: 700;
				}
			}

			.numBox {
				position: absolute;
				right: 0;
				bottom: 0;
				.del {
					font-size: 14px;
					color: #666666;
				}

				.minus {
					image {
						width: 22px;
						height: 22px;
					}
				}

				.input {
					padding: 0 5px;
				}

				.plus {
					image {
						width: 22px;
						height: 22px;
					}
				}
			}
		}
	}

	.bottom {
		position: fixed;
		bottom: 80px;
		left: 0;
		width: 100%;
		padding: 0 15px;

		.box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-left: 25px;
			border-radius: 100px;
			background: #ffffff;
			box-shadow: 0px -1px 6px 0px rgba(0, 0, 0, 0.05);

			/deep/.uni-checkbox-input {
				border-radius: 100px;
				margin-right: 8px;
			}

			.seleAll {
				display: flex;
				align-items: center;

				.msg {
					color: #2b2d30;
					font-size: 14px;
				}
			}

			.allprice {
				display: flex;
				align-items: center;

				.msg {
					font-size: 14px;
					color: #232323;
				}

				.price {
					color: #e1222a;
					font-size: 20px;
				}
			}

			.btn {
				padding: 20px 30px;
				color: #ffffff;
				font-size: 15px;
				background-color: #0a84ff;
				border-radius: 1000px;
			}
		}
	}
}
</style>
